<!-- 编辑弹窗 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :lock-scroll="false"
    :title="isUpdate ? '修改客服' : '添加客服'"
    :visible="visible"
    class="ele-dialog-layout"
    custom-class="ele-dialog-form"
    width="660px"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <div v-show="authority">
        <el-form-item label="推广平台:" prop="platform">
          <el-select
            v-model="form.platform"
            class="ele-block"
            clearable
            placeholder="请选择推广平台"
            @change="platformChange"
          >
            <el-option
              v-for="item in platformList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="归属客户:" prop="customerid">
          <el-select
            v-model="form.customerid"
            class="ele-block"
            clearable
            placeholder="请选择归属客户"
          >
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :disabled="item.status === 0"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="推广市场:" prop="bazaarId">
          <el-select
            v-model="form.bazaarId"
            class="ele-block"
            clearable
            placeholder="请选择推广市场"
            @change="bazaarIdChange"
          >
            <el-option
              v-for="item in bazaarList"
              :key="item.id"
              :disabled="item.status === 0"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="客服分组:" prop="zoneid">
          <el-select
            v-model="form.zoneid"
            class="ele-block"
            clearable
            placeholder="请选择客服分组"
          >
            <el-option
              v-for="item in zoneList"
              :key="item.id"
              :disabled="item.status === 0"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>

      <el-row>
        <el-col :span="12">
          <el-form-item prop="nickname">
            <span slot="label">微信昵称:</span>
            <el-input
              v-model="form.nickname"
              :maxlength="32"
              clearable
              placeholder="请输入微信昵称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="wechat">
            <span slot="label">微信号:</span>
            <el-input
              v-model="form.wechat"
              :maxlength="32"
              clearable
              placeholder="请输入微信号"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item>
            <span slot="label">使用员工:</span>
            <el-input
              v-model="form.name"
              :maxlength="20"
              clearable
              placeholder="请输入使用员工"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <span slot="label">展示手机:</span>
            <el-input
              v-model="form.phone"
              :maxlength="20"
              clearable
              placeholder="请输入展示手机号"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item style="margin-bottom: 10px">
            <span slot="label"
              >权重值
              <el-popover
                content="权重值应用于客服展示, 仅权重展示时有效,比如小王权限值是100,小刘权限值是50,那么我们可以算出小王的展现次数比小刘要翻倍。"
                placement="top-start"
                title="权重值说明"
                trigger="hover"
                width="320"
              >
                <template slot="reference">
                  <i
                    class="el-tooltip el-icon-_question"
                    style="cursor: pointer; margin-right: 10px"
                  ></i>
                </template>
              </el-popover>
              <span style="margin-left: -5px">:</span>
            </span>
            <el-input
              v-model="form.weight"
              :maxlength="20"
              clearable
              placeholder="请输入权重值"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="margin-bottom: 10px">
            <span slot="label"
              >定时开启
              <el-popover
                content="定时开启应用于, 小王状态被停止了, 那么设置对应时间后, 系统将在每天这个时候自动开启该客服。"
                placement="top-start"
                title="定时开启说明"
                trigger="hover"
                width="320"
              >
                <template slot="reference">
                  <i
                    class="el-tooltip el-icon-_question"
                    style="cursor: pointer; margin-right: 10px"
                  ></i>
                </template>
              </el-popover>
              <span style="margin-left: -5px">:</span>
            </span>
            <el-time-select
              style="width: 212px"
              v-model="form.time"
              :picker-options="{ start: '06:00', step: '00:15', end: '12:00' }"
              placeholder="选择时间"
            >
            </el-time-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="性别:" style="margin-bottom: 10px">
        <el-radio-group v-model="form.sex">
          <el-radio :label="0">女</el-radio>
          <el-radio :label="1">男</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="二维码:">
        <el-input
          v-model="form.qrcode"
          clearable
          placeholder="请输入二维码URL地址或上传二维码"
          style="width: 450px"
        />
        <el-upload
          :action="baseURLUpload()"
          :before-upload="beforeUpload"
          :disabled="uploadLoading"
          :headers="headersUpload"
          :on-error="errorUpload"
          :on-progress="progressUpload"
          :on-success="successUpload"
          :show-file-list="false"
          style="position: relative; display: inline-block; margin-left: 10px"
        >
          <el-button
            :disabled="uploadLoading"
            :loading="uploadLoading"
            icon="el-icon-upload"
            size="small"
            style="width: 74px; height: 34px"
            type="primary"
            >{{ uploadText }}
          </el-button>
        </el-upload>

        <div
          style="
            margin-top: 10px;
            border: 1px solid var(--border-color-base);
            width: 48px;
            height: 48px;
          "
        >
          <i
            v-if="!this.form.qrcode"
            class="el-icon-_qrcode"
            style="display: block; font-size: 48px; color: var(--color-primary)"
          ></i>
          <img
            v-else
            :src="this.form.qrcode"
            style="cursor: pointer; display: block; width: 48px; height: 48px"
            @click="viewQrcodeUrl"
          />
        </div>
      </el-form-item>

      <el-form-item label="状态:" style="margin-top: -20px; margin-bottom: 6px">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" style="margin: 10px">
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button :loading="loading" type="primary" @click="save"
        >确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import setting from "@/config/setting";

/**
 * 内存单位枚举
 */
export default {
  name: "serviceEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 市场列表
    bazaar: Array,
    // 归属客户
    customerList: Array,
    // 分组列表
    zone: Array,
    // 修改回显的数据
    data: Object,
    // 客服权限
    authority: Boolean,
  },
  data() {
    return {
      form: Object.assign(
        {},
        {
          qrcode: "",
          status: 1,
          sex: 0,
        },
        this.data
      ),

      platformList: [
        { value: 1, label: "百度SEM竞价" },
        { value: 2, label: "百度信息流" },
        { value: 3, label: "巨量引擎" },
        { value: 4, label: "搜狗推广" },
        { value: 5, label: "卧龙推广" },
        { value: 6, label: "360点睛" },
      ],

      rules: {
        platform: [
          { required: true, message: "请选择推广平台", trigger: "blur" },
        ],
        customerid: [
          { required: true, message: "请选择归属客户", trigger: "blur" },
        ],
        bazaarId: [
          { required: true, message: "请选择推广市场", trigger: "blur" },
        ],
        zoneid: [
          { required: true, message: "请选择推广分组", trigger: "blur" },
        ],
        nickname: [
          { required: true, message: "请输入展示微信昵称", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入微信使用职员", trigger: "blur" },
        ],
        wechat: [
          { required: true, message: "请输入展示微信号", trigger: "blur" },
        ],
      },

      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 市场列表
      bazaarList: [],
      // 市场列表
      tempbazaarList: [],
      // 分组列表
      zoneList: [],
      // 分组列表
      tempZoneList: [],
      // 上传标题
      uploadText: "上传",
      // 上传状态
      uploadLoading: false,
      //上传头部
      headersUpload: {
        Authorization: setting.takeToken(),
      },
    };
  },
  watch: {
    data() {
      if (Object.keys(this.data).length > 0) {
        this.setBazaarList(this.data.platform);
        this.setBazaarId(this.data.bazaarId);
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        for (let i in this.form) {
          this.form[i] = null;
        }
        this.form.sex = 0;
        this.form.status = 1;
        this.isUpdate = false;
      }
    },
    bazaar() {
      if (this.bazaar) {
        this.tempbazaarList = this.bazaar;
      }
    },
    zone() {
      if (this.zone) {
        this.tempZoneList = this.zone;
      }
    },
  },
  methods: {
    bazaarIdChange(obj) {
      this.setBazaarId(obj);
    },

    setBazaarId(obj) {
      this.zoneList = [];
      this.form = Object.assign({}, this.form, {
        zoneid: null,
      });
      for (let i = 0; i < this.tempZoneList.length; i++) {
        if (this.tempZoneList[i].bazaarId === obj) {
          this.zoneList.push(this.tempZoneList[i]);
        }
      }
      if (this.zoneList.length > 1) {
        this.zoneList.sort(function (a, b) {
          return b.status - a.status;
        });
      }
    },

    platformChange(obj) {
      this.setBazaarList(obj);
    },

    setBazaarList(obj) {
      this.bazaarList = [];
      this.form = Object.assign({}, this.form, {
        bazaarId: null,
      });
      for (let i = 0; i < this.tempbazaarList.length; i++) {
        if (this.tempbazaarList[i].platform === obj) {
          this.bazaarList.push(this.tempbazaarList[i]);
        }
      }
      if (this.bazaarList.length > 1) {
        this.bazaarList.sort(function (a, b) {
          return b.status - a.status;
        });
      }
    },

    baseURLUpload() {
      return process.env.VUE_APP_API_BASE_URL + "/service/upload";
    },

    beforeUpload(file) {
      // 验证文件类型
      const fileType = file.type.toLowerCase();
      if (
        [
          "image/jpeg",
          "image/bmp",
          "image/gif",
          "image/png",
          "image/webp",
          "image/tiff",
        ].indexOf(fileType) === -1
      ) {
        this.$message.error("上传文件只能是图片格式!");
        return false;
      }
      // 验证文件大小
      if (!(file.size / 1024 / 1024 < 1)) {
        this.$message.error("上传文件大小不能超过1MB!");
        return false;
      }
      // 开始上传图片
      this.uploadLoading = true;
      return true;
    },

    errorUpload() {
      this.uploadText = "上传";
      this.uploadLoading = false;
      this.$message.error("上传失败!");
    },

    successUpload(obj) {
      this.uploadText = "上传";
      this.uploadLoading = false;
      if (obj.code === 0) {
        this.form.qrcode = obj.url;
        this.$message({
          message: "上传成功!",
          type: "success",
        });
      } else {
        this.$message.error(obj.msg);
      }
    },

    progressUpload(event) {
      if (event.isTrusted) {
        this.uploadText = parseInt(event.percent) + "%";
      }
    },

    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http
            .post(
              "/service/" + (this.isUpdate ? "update" : "create"),
              this.form
            )
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                if (!this.isUpdate) {
                  for (let i in this.form) {
                    this.form[i] = null;
                  }
                  this.form.status = 1;
                }
                this.updateVisible(false);
                this.$emit("done", this.isUpdate);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    updateVisible(value) {
      this.$emit("update:visible", value);
    },

    viewQrcodeUrl() {
      this.$alert(
        '<img src="' +
          this.form.qrcode +
          '" style=" width: 270px; height: 270px;"/>',
        "二维码查看",
        {
          dangerouslyUseHTMLString: true,
          closeOnClickModal: true,
          customClass: "el-message-qr",
          showConfirmButton: false,
        }
      );
    },
  },
};
</script>
<style scoped>
.ele-dialog-layout /deep/ .ele-dialog-form .el-dialog__body {
  margin-left: -26px !important;
}
</style>
